<!DOCTYPE html>
<html>
<head>
    <title>Video.js | HTML5 Video Player</title>
    <meta charset="utf-8">
    <title>教材观看</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <script src="./tcPlayer.js"></script>
    <style>
        #id_test_video{
            width: 100px;
            height: 100px;
        }
        .wrap{
            position: relative;
        }
        .test-text{
            color: #fff;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="test-text">1223121321</div>
<div id="id_test_video" style="width:100%; height:auto;"></div>
</div>
</body>
</html>
<script>
    var player = new TcPlayer('id_test_video', {
        "m3u8": "https://oss.haokanhaowan.cn/video/look/19072314_dev/f96322e73969cf7363b76b2f28866fd8.mp4", //请替换成实际可用的播放地址
        "autoplay" : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        "width" :  '100',//视频的显示宽度，请尽量使用视频分辨率宽度
        "height" : '100'//视频的显示高度，请尽量使用视频分辨率高度
    });
</script>